/* #ifndef APP-NVUE */
page {
  /* 行为相关颜色 */
  --fui-color-primary: #376DFE;
  --fui-color-danger: #FF2B2B;

  /* 文字基本颜色、其他辅助色 */
  /* 用于重量级文字信息、标题 */
  --fui-color-title: #333333;

  /* 链接颜色 */
  --fui-color-link: #2C83FC;

  /* 页面背景底色 */
  --fui-bg-color-grey: #F8F8F8;

  /* 边框颜色 */
  --fui-color-border: #ececec;


  /* 按钮样式重置 */
  .ui-btn-grey {
    .fui-button {
      border-width: 2rpx !important;
      border-color: #f8f8f8 !important;
      background-color: #f8f8f8 !important;

      .fui-button__text {
        color: #999999 !important;
      }
    }
  }

  .ui-btn-primary_plain {
    .fui-button {
      border-width: 2rpx !important;
      border-color: var(--fui-color-primary) !important;
      background-color: #fff !important;

      .fui-button__text {
        color: var(--fui-color-primary) !important;
      }
    }
  }

  .ui-btn-danger_plain {
    .fui-button {
      border-width: 2rpx !important;
      border-color: #f95a5a !important;
      background-color: #fff !important;

      .fui-button__text {
        color: #f95a5a !important;
      }
    }
  }
}


uni-page-body {
  height: 100%;
}

/* #endif */

/* 自定义页面背景 */
.page-grey {
  min-height: 100%;
  box-sizing: border-box;
  background-color: var(--fui-bg-color-grey);
}
.page-primary {
  min-height: 100%;
  box-sizing: border-box;
  background-color: var(--fui-bg-color-grey);
  background-image: url("/static/images/homePage/top_img.png");
  background-size: 100% 380rpx;
  background-repeat: no-repeat;

  &.page-transparent {
    background: transparent !important;
  }

  .ui-header-wrapper {
    position: fixed;
    z-index: 996;
    left: var(--window-left);
    right: var(--window-right);
    top: 0;
    width: 100%;
    height: 0;
    &.ui-header-colorful {
      background-image: url("/static/images/homePage/top_img.png") !important;
      background-size: 100% 380rpx !important;
      background-repeat: no-repeat !important;
    }
    &.ui-header-transparent {
      background: transparent !important;
    }
  }

  .page-content {
    position: relative;
    padding: 60rpx 36rpx 0;
  }

  &.page-index {
    .page-content {
      padding-top: 160rpx;
    }
  }
}

/* 抖动效果 */
@keyframes shake { /* 水平抖动，核心代码 */
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(+2px, 0, 0); }
  30%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(+4px, 0, 0); }
  50% { transform: translate3d(-4px, 0, 0); }
}
.is-shake {
  animation: shake 800ms ease-in-out;
}

/* 公用页面级提示信息 */
.ui-page-tips {
  margin-top: 48rpx;
  padding: 0 24rpx;
  font-size: 24rpx;
  color: #fcad4c;
  ::v-deep .fui-icon {
    margin-right: 10rpx;
  }
}

/* 固定底部按钮区 */
.has-fixed-footer {
  padding-bottom: 150rpx;
}
.ui-fixed-footer {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--fui-bg-color-grey);
  padding: 36rpx 36rpx;
  &.ui-fixed-footer__white {
    background-color: var(--fui-bg-color);
  }
  .fui-button__wrap {
    margin-top: 0 !important;
  }
}

uni-modal {
  z-index: 99999999 !important;
}

/* uni-modal */
.uni-modal {
  border-radius: 20rpx;
  padding: 22rpx;

  .uni-modal__hd {
    padding-top: 22rpx;

    .uni-modal__title {
      font-size: 28rpx;
      font-weight: bold;
      color: var(--fui-color-title);
    }
  }

  .uni-modal__bd {
    min-height: 160rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: var(--fui-color-title);
  }

  .uni-modal__ft {
    justify-content: center;
    padding-top: 22rpx;
    line-height: 1;

    .uni-modal__btn {
      font-size: 28rpx;
      font-weight: bold;

      &:active {
        background-color: transparent;
      }

      &.uni-modal__btn_primary {
        color: var(--fui-color-title);
      }
    }
  }
}

/* 通用底部按钮区 */
.page-btn-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40rpx;
  &.white {
    background-color: #fff;
  }
  ::v-deep .fui-button__wrap {
    &:not(:last-child) {
      margin-right: 54rpx !important;
    }
    &.danger {
      .fui-button {
        background-color: #EA5750 !important;
        &::after {
          border: 2rpx solid #EA5750 !important;
        }
        .fui-button__text {
          color: #fff !important;
        }
      }
      &.plain {
        .fui-button {
          background-color: #fff !important;
          border-color: #EA5750 !important;
          .fui-button__text {
            color: #EA5750 !important;
          }
        }
      }
    }
    &.primary {
      .fui-button {
        background-color: var(--fui-color-primary) !important;
        &::after {
          border: 2rpx solid var(--fui-color-primary) !important;
        }
        .fui-button__text {
          color: #fff !important;
        }
      }
      &.plain {
        .fui-button {
          background-color: #fff !important;
          border-color: var(--fui-color-primary) !important;
          .fui-button__text {
            color: var(--fui-color-primary) !important;
          }
        }
      }
    }
  }
}